<template>
	<view class="container">
		<view class="no-logged" v-if="!isLogin">
			<u-button @click="integrals" type="primary">立即登录</u-button>
			<view style="margin-top: 20rpx"></view>
			<u-button @click="go" type="primary" plain="true">现在点单</u-button>
		</view>
		<view v-else>
			<view class="tabs" v-if="!deskId">
				<view class="item" :class="{ active: tabIndex === index }" @tap="switchTab(index)" v-for="(tab, index) in tabList" :key="index">
					{{ tab.name }}
				</view>
			</view>
			<!-- 有桌台 -->
			<view class="tabs" v-else>
				<view class="item" :class="{ active: tabDeskIndex === tab.type }" v-for="(tab, index) in tabDeskList" :key="index" @tap="tabDeskIndex = tab.type">
					{{ tab.name }}
				</view>
			</view>
			<!-- 有桌台 -->

			<view class="mt-30">
				<!-- 订单列表 begin -->
				<view v-if="orders.length > 0">
					<swiper class="swiper" :show-scrollbar="false" v-if="!deskId">
						<swiper-item @touchmove.stop="true">
							<view class="history-order">
								<swiper :show-scrollbar="false" class="history-order-swiper">
									<swiper-item @touchmove.stop="true">
										<scroll-view scroll-y="true" class="orders-scroll">
											<view class="pl-30 pr-30">
												<view class="order-list border-radius-10" v-for="(order, index) in orders" :key="index" @click="toDedail(order)">
													<view class="header border-b">
														<view class="fsize-32 line-black fweigh-600">{{ order.storeName }}</view>
														<view class="fsize-28 line-yellow">{{ order.stateName }}</view>
													</view>
													<scroll-view scroll-x>
														<view class="images">
															<view v-for="(item, index) in order.foodData" :key="index">
																<image :src="item.image"></image>
																<view class="text-align-center">x{{ item.quantity }}</view>
															</view>
														</view>
													</scroll-view>
													<view class="info">
														<view class="left">
															<view>订单编号:{{ order.orderId }}</view>
															<view class="mt-10">下单时间:{{ order.orderDate }}</view>
														</view>
														<view class="right text-align-right">
															<view class="fweigh-600">
																<text class="fsize-30">￥</text>
																<text class="fsize-40">{{ order.sumAllAmount }}</text>
															</view>
															<view class="fsize-26 line-gray mt-10">共{{ order.sumQuantity }}件</view>
														</view>
													</view>
													<view class="action" @click.stop>
														<!-- <button type="default" hover-class="none">查看评论</button> -->
														<!-- <button type="primary" plain hover-class="none">立即支付</button> -->
														<u-button
															plain
															v-if="order.status === 0"
															color="#F3C35C"
															text="立即支付"
															@click="onPayment(order.orderId, '', order.classId, { userId: order.userId, couponId: order.couponId })"
														></u-button>
													</view>
												</view>
											</view>
										</scroll-view>
									</swiper-item>
								</swiper>
							</view>
						</swiper-item>
					</swiper>
					<!-- 有桌台 -->
					<swiper v-else class="swiper">
						<swiper-item>
							<view class="history-order">
								<swiper :show-scrollbar="false" class="history-order-swiper">
									<swiper-item>
										<scroll-view scroll-y="true" class="orders-scroll">
											<view class="pl-30 pr-30">
												<view class="order-list border-radius-10" v-for="(order, index) in orders" :key="index" @click="toDedail(order)">
													<view class="header border-b">
														<view class="fsize-32 line-black fweigh-600">{{ stock.storeName }}</view>
														<view class="fsize-28 line-yellow">{{ order.stateName }}</view>
													</view>
													<scroll-view scroll-x>
														<view class="images">
															<view v-for="(item, index) in order.foodData" :key="index">
																<image :src="item.image"></image>
																<view class="text-align-center">x{{ item.quantity }}</view>
															</view>
														</view>
													</scroll-view>
													<view class="info">
														<view class="left">
															<view v-if="order.orderNo" class="fsize-32 fweigh-600">单号:{{ order.orderNo }}</view>
															<view>订单编号:{{ order.orderId }}</view>
															<view class="mt-10">下单时间:{{ order.orderDate }}</view>
														</view>
														<view class="right text-align-right">
															<view class="fweigh-600">
																<text v-if="order.orderNo" class="fsize-32 fweigh-600" style="color: transparent">000</text>
																<text class="fsize-30">￥</text>
																<text class="fsize-40">{{ order.sumAllAmount }}</text>
															</view>
															<view class="fsize-26 line-gray mt-10">共{{ order.sumQuantity }}件</view>
														</view>
													</view>
													<view class="action" @click.stop>
														<!-- <button type="default" hover-class="none">查看评论</button> -->
														<!-- <button type="primary" plain hover-class="none">立即支付</button> -->
														<u-button
															plain
															v-if="tabDeskIndex === 1"
															color="#F3C35C"
															text="立即支付"
															@click="onPayment(order.orderIdStr, order.deskId)"
														></u-button>
														<u-button
															plain
															v-if="tabDeskIndex === 1 && !order.userId"
															color="#F3C35C"
															text="绑定会员"
															@click="loginMember(order.orderIdStr, order.deskId)"
														></u-button>
													</view>
												</view>
											</view>
										</scroll-view>
									</swiper-item>
								</swiper>
							</view>
						</swiper-item>
					</swiper>
					<!-- 有桌台 -->
				</view>
				<!-- 订单列表 end -->
				<view class="store-order-wrapper" v-else>
					<image src="/static/images/order/default_img_order.png"></image>
					<view>您还没有下单</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import { mapState } from 'vuex';
import { requestPayment } from '@/utils/payment';
import { pay } from '@/common/util.js';
import { uRequestSubscribeMessage } from '../../../utils/uniUtils';
import common from '@/common/util.js';
export default {
	data() {
		return {
			deskId: 0,
			orderId: 0,
			tabIndex: 0,
			tabList: [
				{
					name: '全部'
				},
				{
					name: '堂食'
				},
				{
					name: '外带'
				},
				{
					name: '外卖'
				}
			],
			// lai
			tabDeskList: [
				{
					name: '未完成',
					type: 1
				},
				{
					name: '已完成',
					type: 2
				}
			],
			deskParams: {
				pagelndex: 1,
				pageSize: 9999
			},
			tabDeskIndex: 1, // 默认选中tab
			orderDeskMenuIndex: 1,
			// lai
			orderMenuIndex: 0,
			orders: [],
			searchData: {
				FType: 0, // 2 打包订单 1 堂食 0全部
				pageIndex: 1,
				pageSize: 999999
			},
			loadMore: false
		};
	},
	onLoad: function () {
		// this.deskId = uni.getStorageSync('deskId') || 0
		// this.orderId = uni.getStorageSync('orderId') || 0
		// if(opt.type) {
		// 	this.tabDeskIndex = opt.type
		// }
		// 	this.getOrders(this.orderId,this.deskId,this.tabDeskIndex)
	},
	onReady() {
		// #ifdef MP-ALIPAY
		uni.setNavigationBarTitle({
			title: '订单列表'
		});
		uni.setNavigationBarColor({
			backgroundColor: '#fff'
		});
		// #endif
	},
	onShow() {
		this.deskId = uni.getStorageSync('deskId') || 0;
		this.orderId = uni.getStorageSync('orderId') || 0;
		this.getOrders(this.orderId, this.deskId, this.tabDeskIndex);
		// if(!uni.$u.test.isEmpty(opt)){
		// 	if(opt.isRefresh){
		// 		this.getOrders(this.orderId,this.deskId,this.tabDeskIndex)
		// 	}
		// }
	},
	onReachBottom() {
		// 没用上
		if (this.loadMore) {
			this.getOrders();
		}
	},
	computed: {
		...mapState(['isLogin', 'stock', 'userInfo']),
		batchInvoiceVisible() {
			// 没用上
			return (!this.orderMenuIndex && this.orders.length) || (this.orderMenuIndex && this.storeOrders.length);
		}
	},
	watch: {
		tabDeskIndex: {
			async handler(newV) {
				// console.log(newV)
				await this.getOrders(this.orderId, this.deskId, newV);
			}
		}
	},
	methods: {
		go() {
			uni.switchTab({
				url: '/pages/tab_bar/classify/classify'
			});
		},
		toDedail(row) {
			if (!this.deskId) {
				if (row.status === 0) {
					uni.navigateTo({
						// url:'/pages/order/detail?orderdes=' + encodeURIComponent(JSON.stringify(row))
						url: '/pages/order/pay_detail?orderId=' + row.orderIdStr
					});
					return;
				}
				uni.navigateTo({
					// url:'/pages/order/detail?orderdes=' + encodeURIComponent(JSON.stringify(row))
					url: '/pages/order/detail?orderId=' + row.orderIdStr
				});
				return;
			}
			// 未完成
			if (this.tabDeskIndex === 1) {
				uni.navigateTo({
					// url:'/pages/order/detail?orderId=' + row.orderId + '&orderIdStr=' + row.orderIdStr + '&deskId=' + row.deskId  + '&type=1'
					url: '/pages/pay/pay_order/index'
				});
			} else {
				// 已完成
				uni.navigateTo({
					url: '/pages/order/detail?orderId=' + row.orderIdStr + '&orderIdStr=' + row.orderIdStr + '&type=2'
				});
			}
		},
		// 跳转登录会员
		async loginMember(orderIdStr, deskId) {
			// 判断是否有登录
			if (this.userInfo.id) {
				await this.$api.bindingUser({
					orderIdStr,
					deskId
				});
				this.getOrders(this.orderId, this.deskId, this.tabDeskIndex);
				return;
			}
			uni.navigateTo({
				url: '/pages/login/login?orderIdStr=' + orderIdStr + '&deskId=' + deskId
			});
		},
		async switchTab(index) {
			if (this.tabIndex === index) return;
			this.tabIndex = index;
			this.searchData.FType = index;
			this.searchData.pageIndex = 0;
			this.orders = [];
			await this.getOrders();
		},
		// 有桌台,切换已完成未完成 @tap="switchDeskTab(tab.type,index)"
		// async switchDeskTab(type,index) {
		// 	if(this.tabDeskIndex === type) return
		// 		this.tabDeskIndex = type
		// 		await this.getOrders(this.orderId,this.deskId,type)
		// },
		// 无桌台
		async switchMenuTab(index) {
			// 没用上
			if (this.orderMenuIndex === index) return;
			this.orderMenuIndex = index;
			await this.getOrders();
		},
		async getOrders(orderID, deskID, Type) {
			if (this.isLogin) {
				// 是否有桌台
				if (this.deskId) {
					const res = await this.$api.getDeskOrderList({
						...this.deskParams,
						orderId: orderID,
						deskId: deskID,
						type: Type
					});
					// console.log(res);
					this.orders = res.data.list;
				} else {
					this.$api
						.GetOrderList({
							...this.searchData,
							storeId: this.stock.id
						})
						.then((res) => {
							this.orders = res.data.list;
							// if(res.data.rowcount > this.orders.length){
							// 	this.searchData.pageIndex++
							// 	this.loadMore = true
							// }else {
							// 	this.loadMore = false
							// }
						});
				}
			}
		},
		integrals() {
			if (!this.isLogin) {
				uni.navigateTo({
					url: '/pages/login/login'
				});
			}
		},
		async onPayment(orderId, deskId, classId, params) {
			/// 订阅服务通知
			// await uRequestSubscribeMessage([
			// 	"LPOJNg_fS9sJfRErZXh72ThLwTR5F-GSQoFclphQltQ", // 下单成功通知
			// 	"", // 取餐通知
			// 	"", // 评价通知
			// ]);

			if (!this.deskId) {
				const payMethod = common.getSystemInfo().hostName === 'alipay' ? 'alipay' : 'wechatpay';
				pay(orderId, payMethod, classId, params);
			} else {
				const res = await this.$api.payDeskOrder({
					orderId,
					deskId
				});
				pay(res.data.orderId);
			}
			// let that = this
			// that.$api.OrderPay({ids: orderId, payment_code: 'wechatpay', payment_type:17, params:{}}).then(respay=>{
			// 	const params = respay.data.respData
			// 	uni.openEmbeddedMiniProgram({
			// 		appId: params.appId,
			// 		path: params.path,
			// 		success(res) {}
			// 	})
			// })
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	background-color: #f6f6f6;
}

.no-logged {
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 0 200rpx;
}

.navbar {
	height: calc(44px + var(--status-bar-height));
	/* #ifdef H5 */
	height: 44px;
	/* #endif */
	display: flex;
	background-color: #ffffff;
}

.talk-btn {
	height: 32px;
	margin-left: 10px;
	margin-top: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24rpx !important;
	padding: 0 20rpx;
	border-radius: 50rem !important;

	image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}
}

.tabs {
	height: 82rpx;
	border-top: 1px #ededed solid;
	display: flex;
	align-items: center;
	padding-left: 30rpx;

	.item {
		height: 100%;
		font-size: 30rpx;
		color: #666;
		font-weight: 400 !important;
		margin-right: 70rpx;
		display: flex;
		align-items: center;

		&.active {
			color: #f3c35c;
			border-bottom: 4rpx solid #f3c35c;
		}
	}
}

.swiper {
	width: 100%;
	height: calc(100vh - var(--status-bar-height) - 82rpx);
}

.history-order {
	width: 100%;
	height: 100%;
	position: relative;

	.menu {
		padding: 18rpx 30rpx;
		display: flex;
		align-items: center;
		font-size: 26rpx;
		color: #666;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10;

		.item {
			padding: 14rpx 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}

			&.active {
				color: #e0a32d;
				background-color: #777;
			}
		}
	}

	.history-order-swiper {
		width: 100%;
		height: 100%;
	}
}

.store-order-wrapper {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
	color: #777;
	line-height: 1.3rem !important;

	image {
		width: 400rpx;
		height: 333rpx;
		margin-bottom: 40rpx;
	}
}

.orders-scroll {
	width: 100%;
	height: 100%;
}

.order-list {
	display: flex;
	width: 100%;
	flex-direction: column;
	background-color: #fff;
	padding: 30rpx;
	margin-bottom: 30rpx;

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 30rpx;
	}

	.images {
		display: flex;
		padding: 30rpx 0;

		image {
			flex-shrink: 0;
			width: 150rpx;
			height: 112.5rpx;
		}
	}

	.info {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;

		.left {
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: 26rpx;
			color: #666;
		}
	}

	.action {
		display: flex;
		justify-content: flex-end;
		align-items: center;

		button {
			margin-left: 30rpx;
			font-size: 24rpx;
		}
	}
}
</style>
